<div class="modal fade in ip-box" tabindex="-1" role="dialog" data-keyboard="false" data-backdrop="static" aria-labelledby="myModalLabel" aria-hidden="true" id="newlyAdded" *ngIf="initService.init">
        <div class="modal-dialog modal-lg-f" role="document">
            <div class="modal-content">

                <div class="modal-header">
                    <button type="button" 
                            class="close" 
                            data-dismiss="modal" 
                            aria-hidden="true"
                            (click)="initService._init()"
                            >×
                    </button>
                    <h4 class="modal-title" id="myModalLabel">IP规则管理 — 新增</h4>
                </div>

                <div class="modal-body">
                    <form #newlyAddedForm="ngForm" (ngSubmit)="_onSubmit(newlyAddedForm.value)">

                        <input type="text"
                               name="id" 
                               class="hide" 
                               #id="ngModel"
                               [ngModel]="getSelectedId"
                               >

                        <div class="form-group">
                            <label class="col-xs-12 col-sm-3 control-label text-right">IP规则名称：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                	   name="ruleName" 
                                	   class="form-control" 
                                       autocomplete="off" 
                                	   required
                                       #ruleName="ngModel"
                                       placeholder="请输入IP规则名称"
                                	   ngModel
                                	   >
                                <label class="red required">*</label>
                                <div class="error" *ngIf="ruleName.invalid && (ruleName.touched)">
	                            	<small class="error" *ngIf="ruleName.errors.required">IP规则名称不能为空</small>
	                            </div>
                            </div>
                        </div>
						
							
                        <div class="form-group height-auto">
                            <label class="col-xs-12 col-sm-3 control-label text-right">优先级：</label>   
                            <div class="one-line col-xs-12 col-sm-3">
                                <select name="sortIndex" 
                                        required 
                                        #sortIndex="ngModel"
                                        ngModel="1"
                                        >
                                    <option value="0">高</option>
                                    <option value="1">中</option>
                                    <option value="2">低</option>
                                </select>
                                <div class="error" *ngIf="sortIndex.invalid && (sortIndex.touched)">
                                    <small class="error" *ngIf="sortIndex.errors.required">请选择优先级</small>
                                </div>
                            </div>

                            <label class="one-line col-xs-12 col-sm-3 control-label text-right">规则模式：</label>   
                            <div class="col-xs-12 col-sm-3">
                                <select name="ruleMode" 
                                        required 
                                        #ruleMode="ngModel"
                                        ngModel="1"
                                        >
                                    <option value="0">禁止</option>
                                    <option value="1">允许</option>
                                </select>
                                <div class="error" *ngIf="ruleMode.invalid && (ruleMode.touched)">
                                    <small class="error" *ngIf="ruleMode.errors.required">请选择规则模式</small>
                                </div>
                            </div>
                        </div>


                        <div class="form-group height-auto">
                            <label class="col-xs-12 col-sm-3 control-label text-right">是否启用：</label>   
                            <div class="col-xs-12 col-sm-9">
                                <select name="enabled" 
                                        required 
                                        #enabled="ngModel"
                                        ngModel="1"
                                        >
                                 	<option value="0">禁用</option>
                                 	<option value="1">启用</option>
                                </select>
                                <div class="error" *ngIf="enabled.invalid && (enabled.touched)">
                                    <small class="error" *ngIf="enabled.errors.required">请选择是否启用</small>
                                </div>
                            </div>
                        </div>

                        <div class="form-group height-auto">
                            <label class="col-xs-12 col-sm-3 control-label text-right">IP表达式：</label>
                            <div class="col-xs-12 col-sm-9">
                                <input type="text" 
                                       name="expression" 
                                       class="form-control" 
                                       autocomplete="off" 
                                       required
                                       pattern="^[0-9\.\!\|\-\,\*\,]*$"
                                       #expression="ngModel"
                                       placeholder="请输入IP表达式"
                                       ngModel
                                       >
                                <label class="red required">*</label>
                                <div class="error" *ngIf="expression.invalid && (expression.touched)">
                                    <small class="error" *ngIf="expression.errors.required">IP表达式不能为空</small>
                                    <small class="error" *ngIf="expression.errors.pattern">请输入正确的IP表达式</small>
                                </div>
                            </div>
                        </div>
                        <div class="ip-page col-sm-12">
                            <h5>
                                <strong>IP表达式说明</strong>
                            </h5>
                            <p>1、xxx.xxx.xxx.xxx (一个确定的IP地址)。</p>
                            <p>2、使用 '|' 隔开每个IP子表达式。</p>
                            <p>3、IP段设置。 例如，'10.1' 表示所有以 '10.1.'开头的IP地址，如10.1.1.0 和 10.1.0.1 ,而不是 '10.12.1.1'。</p>
                            <p>4、使用 '-' 来设置一个IP范围。例如, '222.111-222.113'，比如包括 222.111.0.1,222.112.0.2, ...,222.113.0.254。</p>
                            <p>5、使用 '!'来排除IP地址。例如，'!222.111-222.113'，比如不包括 222.111.0.1,222.112.0.2, ...,222.113.0.254。</p>
                            <p>6、使用 '*' 来包含所有的IP地址。</p>
                            <p>7、使用 '!*' 来排除所有的IP地址。</p>
                            <p>8、'xxx.xxx' 等同于 'xxx.xxx.' 等同于 'xxx.xxx.*'</p>
                        </div>

                        <div class="modal-footer modal-footer-tongy">
                            <button type="button" 
                                    class="btn btn-fff" 
                                    data-dismiss="modal"
                                    (click)="initService._init()"
                                    >取消
                            </button>
                            <button type="submit" 
                                    class="btn btn-primary" 
                                    [disabled]="newlyAddedForm.invalid"
                                    ><span class="glyphicon glyphicon-plus"></span> 新增
                            </button>
                        </div>
                        
                    </form>
                </div>
            </div>
        </div>
    </div>
